<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日快乐！</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            padding: 20px;
            touch-action: manipulation;
        }
        
        /* 背景装饰 */
        .decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            pointer-events: none;
        }
        
        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 8s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(20deg); }
        }
        
        /* 信纸样式 */
        .letter-container {
            background: linear-gradient(to bottom, #f9f7eb, #fffbf0);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            max-width: 600px;
            width: 100%;
            position: relative;
            margin-bottom: 30px;
            transition: opacity 0.5s ease;
        }
        
        .letter-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
        }
        
        .letter-header:after {
            content: "";
            display: block;
            width: 100px;
            height: 2px;
            background: linear-gradient(to right, transparent, #d4af37, transparent);
            margin: 15px auto;
        }
        
        .letter-header h1 {
            font-size: 28px;
            color: #d4af37;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
        }
        
        .letter-date {
            font-style: italic;
            color: #888;
            margin-top: 5px;
        }
        
        /* 打字机文本 */
        .typewriter {
            min-height: 200px;
            font-size: 20px;
            line-height: 1.6;
            text-align: left;
            font-family: 'Georgia', serif;
        }
        
        .typewriter p {
            margin-bottom: 15px;
            text-indent: 2em;
        }
        
        .letter-signature {
            text-align: right;
            margin-top: 30px;
            font-style: italic;
            color: #555;
        }
        
        /* 播放按钮 */
        .play-btn {
            width: 80px;
            height: 80px;
            background: #ff4081;
            border-radius: 50%;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 0 25px rgba(255, 64, 129, 0.8);
            animation: pulse 2s infinite;
            margin: 20px 0;
            transition: transform 0.3s, opacity 0.5s;
        }
        
        .play-btn:hover {
            transform: scale(1.1);
        }
        
        .play-btn i {
            font-size: 36px;
            color: white;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7); }
            70% { box-shadow: 0 0 0 20px rgba(255, 64, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0); }
        }
        
        /* 视频容器 */
        .video-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        
        .video-container video {
            max-width: 100%;
            max-height: 100%;
        }
        
        .close-video {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 30px;
            color: white;
            cursor: pointer;
        }
        
        /* 蛋糕场景 */
        .cake-scene {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: 100%;
        }
        
        .cake-container {
            position: relative;
            /* 调整蛋糕图片大小 - 修改这里的width和height值 */
            width: 300px;  /* 可以修改这个值来调整蛋糕宽度 */
            height: 300px; /* 可以修改这个值来调整蛋糕高度 */
            margin-bottom: 10px;
        }
        
        .cake-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            cursor: pointer;
        }
        
        /* 火花效果 */
        .spark {
            position: absolute;
            /* 调整火花位置 - 修改这里的top和left值 */
            top: 0%;  /* 可以修改这个值来调整火花垂直位置 */
            left: 50%; /* 可以修改这个值来调整火花水平位置 */
            transform: translateX(-50%);
            width: 30px;
            height: 50px;
            background: #ff9d00;
            border-radius: 50% 50% 20% 20%;
            animation: flicker 1.5s infinite alternate;
            box-shadow: 0 0 20px #ff9d00, 0 0 40px #ff9d00;
            cursor: pointer;
            z-index: 3;
            pointer-events: none; /* 火花本身不接收点击事件，点击蛋糕图片即可 */
        }
        
        @keyframes flicker {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
            50% { transform: translateX(-50%) scale(0.8); opacity: 0.8; }
        }
        
        .instruction {
            font-size: 20px;
            margin-top: 20px;
            padding: 15px 30px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 30px;
            animation: blink 2s infinite;
            color: #333;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* 礼花效果 */
        .fireworks {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 200;
            pointer-events: none;
            display: none;
        }
        
        .firework {
            position: absolute;
        }
        
        .birthday-text {
            font-size: 48px;
            font-weight: bold;
            color: #ff4081;
            text-shadow: 3px 3px 0 #ffd700, 6px 6px 0 rgba(0, 0, 0, 0.2);
            margin: 30px 0;
            display: none;
            animation: zoom 1s ease-out;
            position: absolute;
            top: 65%;
            width: 100%;
            text-align: center;
            z-index: 15;
        }
        
        @keyframes zoom {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* 响应式调整 */
        @media (max-width: 600px) {
            .letter-container {
                padding: 20px;
            }
            
            .typewriter {
                font-size: 18px;
            }
            
            .birthday-text {
                font-size: 36px;
            }
            
            .cake-container {
                /* 移动端蛋糕大小调整 */
                width: 280px;  /* 可以修改这个值来调整移动端蛋糕宽度 */
                height: 280px; /* 可以修改这个值来调整移动端蛋糕高度 */
            }
            
            .spark {
                /* 移动端火花位置调整 */
                top: 30%;  /* 可以修改这个值来调整移动端火花垂直位置 */
                left: 50%; /* 可以修改这个值来调整移动端火花水平位置 */
            }
            
            .letter-header h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="decoration" id="decoration"></div>
    
    <div class="letter-container" id="letterContainer">
        <div class="letter-header">
            <h1>To 亲爱的辰哥</h1>
            <div class="letter-date" id="currentDate"></div>
        </div>
        
        <div class="typewriter" id="typewriter"></div>
        
        <div class="letter-signature">
            <p>云迹星</p>
        </div>
    </div>
    
    <div class="play-btn" id="playBtn">
        <i class="fas fa-play"></i>
    </div>
    
    <div class="cake-scene" id="cakeScene">
        <div class="cake-container">
            <!-- 这里将显示您的蛋糕图片 -->
            <img src="assetes/生日蛋糕.png" alt="生日蛋糕" class="cake-image" id="cakeImage">
            <div class="spark" id="spark"></div>
        </div>
        <div class="instruction" id="instruction">点击蛋糕吹灭蜡烛</div>
    </div>
    
    <div class="birthday-text" id="birthdayText">生日快乐！</div>
    
    <div class="video-container" id="videoContainer">
        <video id="birthdayVideo" controls>
            <!-- 请将此处替换为您的实际视频URL -->
            <source src="assetes/生日快乐.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div class="close-video" id="closeVideo"><i class="fas fa-times"></i></div>
    </div>
    
    <div class="fireworks" id="fireworks"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 设置当前日期
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
            
            // 创建背景装饰
            const decoration = document.getElementById('decoration');
            for (let i = 0; i < 20; i++) {
                const bubble = document.createElement('div');
                bubble.classList.add('bubble');
                const size = Math.random() * 60 + 20;
                bubble.style.width = `${size}px`;
                bubble.style.height = `${size}px`;
                bubble.style.left = `${Math.random() * 100}%`;
                bubble.style.top = `${Math.random() * 100}%`;
                bubble.style.animationDelay = `${Math.random() * 5}s`;
                decoration.appendChild(bubble);
            }
            
            // 打字机效果
            const typewriterElement = document.getElementById('typewriter');
            // 使用<br>标签实现换行
            const text = "见字如晤。<br>与君初相识，犹如故人归。天涯明月新，朝暮最相思。<br>尽管只有短短一个多月的相处，但我能感受到你是一个温柔、心思细腻的人。也许外表看不出来，你的心里有着自己的小宇宙呢，要守好这片宇宙哦~<br>愿你的未来一路长虹，也许没有鲜花与烟火作陪，但也不乏浪漫与星光。<br>愿我如星君如月，夜夜流光相皎洁。<br>下面那个按钮，点一下！要看完哦~<br>生日快乐！";
            let charIndex = 0;
            let isTyping = true;
            
            function typeWriter() {
                if (charIndex < text.length) {
                    // 处理HTML标签
                    if (text.charAt(charIndex) === '<') {
                        // 找到标签结束位置
                        const tagEnd = text.indexOf('>', charIndex);
                        if (tagEnd !== -1) {
                            // 一次性插入整个标签
                            typewriterElement.innerHTML += text.substring(charIndex, tagEnd + 1);
                            charIndex = tagEnd + 1;
                        } else {
                            // 如果没有找到结束标签，按普通字符处理
                            typewriterElement.innerHTML += text.charAt(charIndex);
                            charIndex++;
                        }
                    } else {
                        typewriterElement.innerHTML += text.charAt(charIndex);
                        charIndex++;
                    }
                    setTimeout(typeWriter, 100);
                } else {
                    isTyping = false;
                    // 显示播放按钮
                    document.getElementById('playBtn').style.display = 'flex';
                }
            }
            
            // 视频播放功能
            const playBtn = document.getElementById('playBtn');
            const videoContainer = document.getElementById('videoContainer');
            const birthdayVideo = document.getElementById('birthdayVideo');
            const closeVideo = document.getElementById('closeVideo');
            const letterContainer = document.getElementById('letterContainer');
            const cakeImage = document.getElementById('cakeImage');
            const spark = document.getElementById('spark');
            
            // 设置蛋糕图片路径 - 请将下面的URL替换为您的蛋糕图片路径
            cakeImage.src = "assetes/生日蛋糕.png";
            
            playBtn.addEventListener('click', function() {
                videoContainer.style.display = 'flex';
                birthdayVideo.play();
                
                // 隐藏信件和播放按钮
                letterContainer.style.opacity = '0';
                playBtn.style.opacity = '0';
                
                // 完全隐藏元素
                setTimeout(() => {
                    letterContainer.style.display = 'none';
                    playBtn.style.display = 'none';
                }, 500);
            });
            
            closeVideo.addEventListener('click', function() {
                videoContainer.style.display = 'none';
                birthdayVideo.pause();
            });
            
            // 视频结束后显示蛋糕
            birthdayVideo.addEventListener('ended', function() {
                videoContainer.style.display = 'none';
                
                // 显示蛋糕场景
                document.getElementById('cakeScene').style.display = 'flex';
            });
            
            // 吹灭蜡烛功能 - 点击蛋糕图片即可
            cakeImage.addEventListener('click', function blowCandle() {
                // 添加吹蜡烛动画
                spark.style.animation = 'none';
                spark.offsetHeight; // 触发重绘
                spark.style.animation = 'flicker 0.5s forwards';
                
                setTimeout(function() {
                    spark.style.display = 'none';
                    document.getElementById('instruction').style.display = 'none';
                    
                    // 显示礼花效果
                    showFireworks();
                    
                    // 显示生日文字
                    setTimeout(function() {
                        document.getElementById('birthdayText').style.display = 'block';
                    }, 2000);
                }, 500);
            });
            
            // 礼花效果
            function showFireworks() {
                const fireworksContainer = document.getElementById('fireworks');
                fireworksContainer.style.display = 'block';
                
                // 创建多个礼花效果
                for (let i = 0; i < 50; i++) {
                    createFirework();
                }
                
                // 3秒后隐藏礼花
                setTimeout(function() {
                    fireworksContainer.style.display = 'none';
                }, 5000);
            }
            
            function createFirework() {
                const firework = document.createElement('div');
                firework.classList.add('firework');
                
                const colors = ['#ff4081', '#00e5ff', '#ffd600', '#09ef9e', '#ff9100'];
                const color = colors[Math.floor(Math.random() * colors.length)];
                
                firework.style.left = `${Math.random() * 100}%`;
                firework.style.top = `${Math.random() * 100}%`;
                firework.style.width = '6px';
                firework.style.height = '6px';
                firework.style.backgroundColor = color;
                firework.style.borderRadius = '50%';
                firework.style.position = 'absolute';
                
                document.getElementById('fireworks').appendChild(firework);
                
                // 礼花动画
                const animation = firework.animate([
                    { transform: 'translateY(0) scale(1)', opacity: 1 },
                    { transform: `translateY(-${Math.random() * 30 + 20}px) translateX(${Math.random() * 40 - 20}px) scale(1.5)`, opacity: 0.8 },
                    { transform: `translateY(-${Math.random() * 60 + 40}px) translateX(${Math.random() * 80 - 40}px) scale(2)`, opacity: 0.5 },
                    { transform: `translateY(-${Math.random() * 90 + 60}px) translateX(${Math.random() * 120 - 60}px) scale(2.5)`, opacity: 0 }
                ], {
                    duration: Math.random() * 2000 + 1000,
                    easing: 'cubic-bezier(0.1, 0.3, 0.2, 1)'
                });
                
                animation.onfinish = function() {
                    firework.remove();
                };
            }
            
            // 开始打字机效果
            setTimeout(typeWriter, 1000);
        });
    </script>
</body>
</html>